
// import HtmlWebpackPlugin from 'html-webpack-plugin'

var HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
//删除dist目录
const CleanWebpackPlugin = require('clean-webpack-plugin')

//抽离css
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    // entry: './src/main.js',

    //当我们抽离第三方包抽离的时候 , entry改成对象
    //多入口
    entry:{
        'axios':['axios'],
        'jquery':['jquery'],
        'moment':['moment'],
        'v-distpicker':['v-distpicker'],
        'vue-lazyload':['vue-lazyload'],
        'quanjiatong':['vue','vue-router','vuex'],
        'bundle':'./src/main.js'
    },
    //多出口
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'js/[name].js'
    },
    // output: {
    //     path: path.resolve(__dirname, 'dist'),
    //     filename: 'bundle.js'
    // },
    module: {//配置loader
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                // use: [
                //     { loader: "style-loader" },
                //     { loader: "css-loader" }
                // ]

                // 导出css样式
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use:{
                        loader: 'css-loader',
                        options: {
                            // If you are having trouble with urls not resolving add this setting.
                            // See https://github.com/webpack-contrib/css-loader#url                        
                            minimize: true //压缩抽离出去的css                        
                        }
                    }, 
                })
            },
            {
                test: /\.(ttf|eot|svg|woff|jpg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        //抽取静态资源
                        options: {
                            limit: 2000,    //阀值 , 大于2B时 , 进行打包
                            //把抽离出去的图片 , 字体文件放在单独的文件夹中
                            name:'statics/[name]-[hash:5].[ext]'   
                        }
                    }
                ]
            },
            { 
                test: /\.js$/, 
                exclude: /node_modules/,  //排除的意思
                loader: "babel-loader" }
        ]
    },
    resolve: {
        extensions: ['.vue', '.js', '.json', '*']
    },
    plugins: [//插件中的内容都是new出来的

        //打包之前，删除dist目录，写在其它插件前面
        new CleanWebpackPlugin('dist'),
        //生成index.html
        new HtmlWebpackPlugin({
            template: './template.html', //参照文件的路径
            filename: 'index.html',//最后发布到node服务器上面的名称
            //压缩html的配置
            minify:{
                removeComments:true, //压缩注释
                minifyCSS:true,  //压缩css
                minifyJS:true,
                collapseWhitespace:true, //取出空格
            }
        }),
        new webpack.ProvidePlugin({
	        $:"jquery",
	        jQuery:"jquery"
        }),

        //压缩相关 , DefinePlugin 指定压缩环境
        new webpack.DefinePlugin({
            'process.env': {
            NODE_ENV: '"production"'
            }
        }),
        //非常牛逼的压缩js  ,webpack 内置对js压缩 , 基于 uglifyjs
        new webpack.optimize.UglifyJsPlugin({
            compress: {
              warnings: false,  // 去掉警告
              drop_debugger: true,
              drop_console: true //去除console.log
            },
            comments:false //去掉版权信息
        }),
        //抽取所有css文件
        new ExtractTextPlugin("css/styles.css"), 

        //抽离第三方包 ,js
        new webpack.optimize.CommonsChunkPlugin({
            name:['jquery','moment','quanjiatong','axios','v-distpicker','vue-lazyload'],
            minChunks: Infinity,
        })
        
    ]
}